<template>
  <div class="copyable-address">
    <span>{{ displayText }}</span>
    <el-tooltip content="复制" placement="top">
        <el-button  circle size="small"
        :disabled="!value"
        style="border: none;"
        @click="copyToClipboard"    
         class="custom-link-button"> <el-icon><CopyDocument /></el-icon></el-button>
    </el-tooltip>
  </div>
</template>

<script>
import { computed } from 'vue';
// import { cutMiddle } from '../utils/index.js';
import { ElMessage } from 'element-plus';

export default {
  props: {
    // 需要显示和复制的地址
    value: {
      type: [String, Number],
      default: 0
      // required: true
    },
    // 地址显示的最大长度
    maxLength: {
      type: Number,
      default: 12
    }
  },
    setup(props) {
     const cutMiddle = (text = '', left = 6, right = 6) => {
      if (typeof text !== 'string') return '';

      text = text.trim();
      if (text.length <= left + right) return text;
      return `${text.substring(0, left)}...${text.substring(text.length - right)}`;
    };
    // 计算显示文本
    const displayText = computed(() => {
      if (!props.value) return '';
      return cutMiddle(props.value, Math.floor(props.maxLength / 2), Math.floor(props.maxLength / 2)) ;
    });

    // 复制到剪贴板
    const copyToClipboard = () => {
      if (!props.value) return;
      
      navigator.clipboard
        .writeText(props.value)
        .then(() => {
          ElMessage.success('复制成功');
        })
        .catch((error) => {
          console.error('复制失败:', error);
          ElMessage.error('复制失败，请稍后重试');
        });
    };

    return {
      displayText,
      copyToClipboard
    };
  }
};
</script>

<style scoped lang="less">
.copyable-address {
  display: inline-flex;
  align-items: center;
   
}
.custom-link-button {
  /* 调整文字颜色 */
//   color: #7ee1c5;
  color: skyblue;
  /* 去掉下划线 */
  text-decoration: none;
  /* 其他样式调整 */
  font-size: 16px;
}
</style>
